<template>
  <!--模板-->
  {{ person }}<br>
  {{ base }}<br>
  {{ model2 }}<br>
  {{ model }}
  <hr>
  <son v-model="myValue"></son>
  {{ myValue }}
  <hr>
  <el-input
    v-model="refJosn2"
    :rows="5"
    type="textarea"
    placeholder="">
  </el-input>
</template>

 

<script setup lang="ts">
  import { computed, reactive, ref, watch, watchEffect } from 'vue'
  import { regPerson, regPerson2 } from './50-config'
  import type { IPerson } from './50-config'
  
  import Person from './_class-person'
  import Base from './_class-base'

  import Model from './_class-model'
  import Model2 from './_class-model2'

  import son from './50-class-son.vue'

  const myValue = ref('')
  const person = new Person( '我是强类型风格的class', 10 )
  console.log('person', person)
  person.$state = {
    name: '改个名字',
    age: 1
  }

  const base = new Base({
    name: '我是js风格的class',
    age: 18
  })
  console.log('base', base)
  base.$state = {
    name: '改个名字',
    age: 1
  }

  // base.name = 'ts 不识别泛型的属性'

  const model = Model({
    name: '我是语法糖，合并类型',
    age: 18
  })
  console.log('model', model)

  // 可以检查类型
  model.$state = {
    name: '改个名字',
    age: 1
  }
  model.name = 'ts 可以识别了'

  const model2 = Model2({
    name: '我是套壳的 reactive',
    age: 18
  })

  console.log('model2', model2)

  // 可以检查类型
  model2.$state = {
    name: '直接赋值也用响应性',
    age: 1
  }
  model2.name = '有响应性了'

  // 提供给子组件
  regPerson2<IPerson>(model2)

  const model3 = reactive({
    name: '演示一下'
  })
  const json = computed(() => {
    return JSON.stringify(model3, null, 2)
  })
  console.log('computed', json)

  const refJosn = ref('')
  watch(model3, () => {
    refJosn.value = JSON.stringify(model3, null, 2)
  })

  const refJosn2 = ref('')
  watchEffect(() => {
    refJosn2.value = JSON.stringify(model2, null, 2)
  })

</script>